<template>
  <div id="container">
    <div class="header-wrap">
      <div class="header">
        <img :src="require('@/assets/img/yellow-penguin.webp')" alt class="penguin" />
        <div class="header-center">
          <span class="word">Hi,Baker</span>
          <span class="word2">今天是你学习的第1天</span>
        </div>
        <div class="header-right">
          <div class="diamond-wrap">
            <img :src="require('@/assets/img/diamond.webp')" alt class="diamond" />
            <span class="diamond-word">0</span>
          </div>
          <div class="like-wrap">
            <img :src="require('@/assets/img/like.webp')" alt class="like" />
            <span class="like-word">0</span>
          </div>
        </div>
      </div>
    </div>
    <div class="record">
      <p class="course">
        共学习课次
        <br />
        <span class="count">0</span>
        <span class="course-word">&nbsp;次</span>
      </p>
      <span>/</span>
      <p class="english">
        共学习课次
        <br />
        <span class="count">0</span>
        <span class="course-word">&nbsp;次</span>
      </p>
      <span>/</span>
      <p class="mvp">
        共学习课次
        <br />
        <span class="count">0</span>
        <span class="course-word">&nbsp;次</span>
      </p>
    </div>
    <div class="shadow-wrap">
      <div class="shadow-left"></div>
      <div class="shadow-right"></div>
    </div>
    <div class="section">
      <div class="success">
        <img :src="require('@/assets/img/pentagram.webp')" alt class="pentagram" />
        <span class="success-word">我的成就</span>
      </div>
      <div class="arrows" @click="click">
        <img :src="require('@/assets/img/right-arrow.webp')" alt class="right-arrow" />
      </div>
    </div>
    <div class="achievement-wrap">
      <div class="achievement">
        <img :src="require('@/assets/img/achievement1.webp')" alt class="achievement-img" />
        <span class="achievement-word">持之以恒</span>
      </div>
      <div class="achievement">
        <img :src="require('@/assets/img/achievement2.webp')" alt class="achievement-img" />
        <span class="achievement-word">孜孜不倦</span>
      </div>
      <div class="achievement">
        <img :src="require('@/assets/img/achievement3.webp')" alt class="achievement-img" />
        <span class="achievement-word">我是学霸</span>
      </div>
      <div class="achievement">
        <img :src="require('@/assets/img/achievement4.webp')" alt class="achievement-img" />
        <span class="achievement-word">常胜将军</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    click() {
      this.$router.push("/Achievement");
    }
  }
};
</script>
<style lang="scss" scoped>
#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-wrap {
  width: 375px;
  height: 148px;
  background: #3b98ff;
  display: flex;
  justify-content: space-between;
}

.header {
  width: 345px;
  height: 55px;
  margin: 39.5px 15px 0 15px;
  display: flex;
}
.penguin {
  width: 55px;
  height: 55px;
}
.header-center {
  width: 116px;
  height: 37px;
  margin-left: 16.5px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.word {
  font-size: 16px;
}
.word2 {
  font-size: 11px;
  margin-top: 5px;
}
.header-right {
  width: 110px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin-left: 50px;
  margin-top: 6px;
}
.diamond-wrap,
.like-wrap {
  width: 50px;
  height: 50px;
  background: #0f95eb;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.diamond {
  width: 21.25px;
  height: 19.3px;
  margin-top: 8.2px;
  margin-left: 14.5px;
}
.like {
  width: 19.65px;
  height: 19.7px;
  margin-top: 7.8px;
  margin-left: 15.5px;
}
.diamond-word,
.like-word {
  font-size: 11px;
  color: #ffffff;
  line-height: 22.5px;
}
.record {
  width: 354.05px;
  height: 99.15px;
  display: flex;
  border-radius: 20px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 11px;
  margin-top: -40px;
  background: #ffffff;
  -moz-box-shadow: 0 0 5px 2px #bfc7d1;
  -webkit-box-shadow: 0 0 5px 2px #bfc7d1;
  box-shadow: 0 0 5px 2px #bfc7d1;
}
.count {
  font-size: 17px;
  font-weight: 800;
  color: #000000;
}
.course-word {
  color: #bfc7d1;
}
.shadow-wrap {
  width: 375px;
  height: 95px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0);
  margin-top: -80px;
  display: flex;
  justify-content: space-between;
}
// .shadow-left,
// .shadow-right {
//   width: 10.5px;
//   height: 95px;
//   background: #ffffff;
//   border-radius: 20px;
// }
// .shadow {
//   width: 340px;
//   height: 95px;
//   // background-color: rgba(255, 255, 255, 1);
//   background: chartreuse;
//   opacity: 0;
// }
.section {
  width: 337px;
  height: 25px;
  margin-top: 44px;
  display: flex;
  justify-content: space-between;
}
.success {
  display: flex;
  align-items: center;
}
.pentagram {
  width: 24px;
  height: 25px;
}
.success-word {
  font-size: 17px;
  margin-left: 4.5px;
}
.arrows {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #bfc7d1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right-arrow {
  width: 7.5px;
  height: 10.5px;
}
.achievement-wrap {
  width: 375px;
  height: 76px;
  display: flex;
  justify-content: space-evenly;
  margin-top: 17px;
}
.achievement {
  width: 58px;
  height: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.achievement-img {
  width: 58px;
  height: 63px;
}
.achievement-word {
  font-size: 11px;
  margin-top: 8px;
}
</style>
